<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-09 17:03:03
 * @LastEditors: dh
 * @LastEditTime: 2021-09-09 17:03:03
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>线性渐变模拟长阴影</title>
	</head>

	<body>
		<div></div>
		<style>
			body {
				background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%));
				overflow: hidden;
			}

			div {
				position: relative;
				width: 30vmin;
				height: 30vmin;
				background: #fff;
				margin: 30vmin auto;
			}

			div::before,
			div::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}

			div::before {
				transform-origin: 0 50%;
				transform: translate(100%, 0) skewY(45deg) scaleX(0.6);
				background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
				animation: shadowMoveY 5s infinite linear alternate;
			}

			div::after {
				transform-origin: 0 0;
				transform: translate(0%, 100%) skewX(45deg) scaleY(0.6);
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
				animation: shadowMoveX 5s infinite linear alternate;
			}

			@keyframes shadowMoveX {
				to {
					transform: translate(0%, 100%) skewX(50deg) scaleY(0.6);
				}
			}

			@keyframes shadowMoveY {
				to {
					transform: translate(100%, 0) skewY(40deg) scaleX(0.6);
				}
			}
		</style>
	</body>
</html>
